<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cursor</title>
    <!-- 通过改变光标的形态，提升用户的界面交互体验 -->
    <!-- 常用样式：-default-是默认箭头光标；-pointer-是手型光标；-text-是I型竖线，可用文本编辑区域；-wait-是等待（圆圈或者沙漏），表示加载；
                 -help-帮助，是带问号的箭头，用于提示信息区域；-not-allowed-是禁止（圆圈带斜线）；-grab-是抓取，表示可拖动；
                 -grabbing-是抓取中，表示正在拖动；-zoom-in-放大（+）；-zoom-out-表示缩小（-）；-move-十字形状 -->
    <style>

        * {
            box-sizing: border-box;
            margin: 0%;
            padding: 0%;
        }

        html,body {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <ul style="list-style: none; margin: 20px 0 0 50px;">
        <li style="font-size: 30px; cursor: pointer;">手型光标</li>
        <li style="font-size: 30px; cursor: text;">I型竖线</li>
        <li style="font-size: 30px; cursor: wait;">等待</li>
        <li style="font-size: 30px; cursor: help;">帮助</li>
        <li style="font-size: 30px; cursor: not-allowed;">禁止</li>
        <li style="font-size: 30px; cursor: grab;">抓取</li>
        <li style="font-size: 30px; cursor: grabbing;">正在抓取</li>
        <li style="font-size: 30px; cursor: zoom-in;">放大</li>
        <li style="font-size: 30px; cursor: zoom-out;">缩小</li>
        <li style="font-size: 30px; cursor: move;">十字形状</li>
    </ul>
</body>
</html>